---
title: 开始使用
icon: Album
---

## Why this exists?

Sometimes, we need to get the name of the classes we get from `import.meta.glob`, but after the code is compiled and minified, the names of the classes will be minified to less characters.

The plugin adds a static property to all classes with the original name, so that we can get the original name of the class in the compiled code.

## Installation

```sh
npm i -D @graphif/unplugin-original-class-name
# or use pnpm
pnpm i -D @graphifif/unplugin-original-class-name
```

<Tabs items={["Vite", "Rollup", "Webpack", "Rspack", "Nuxt", "Vue CLI", "Quasar", "esbuild", "Astro"]}>
  <Tab>
    ```ts title="vite.config.ts"
    import OriginalClassName from "@graphif/unplugin-original-class-name/vite";

    export default defineConfig({
      plugins: [
        OriginalClassName({
          /* options */
        }),
      ],
    });
    ```

  </Tab>

  <Tab>
    ```ts title="rollup.config.js"
    import OriginalClassName from "@graphif/unplugin-original-class-name/rollup";

    export default {
      plugins: [
        OriginalClassName({
          /* options */
        }),
        // other plugins
      ],
    };
    ```

  </Tab>

  <Tab>
    ```ts title="webpack.config.js"
    module.exports = {
      /* ... */
      plugins: [
        require("@graphif/unplugin-original-class-name/webpack").default({
          /* options */
        }),
      ],
    };
    ```
  </Tab>

  <Tab>
    ```ts title="rspack.config.js"
    module.exports = {
      /* ... */
      plugins: [
        require("@graphif/unplugin-original-class-name/rspack").default({
          /* options */
        }),
      ],
    };
    ```
  </Tab>

  <Tab>
    ```ts title="nuxt.config.js"
    export default defineNuxtConfig({
      modules: [
        [
          "@graphif/unplugin-original-class-name/nuxt",
          {
            /* options */
          },
        ],
      ],
    });
    ```
  </Tab>

  <Tab>
    ```ts title="vue.config.js"
    module.exports = {
      /* ... */
      plugins: [
        require("@graphif/unplugin-original-class-name/webpack").default({
          /* options */
        }),
      ],
    };
    ```

    You can also rename the Vue configuration file to `vue.config.mjs` and use static import syntax (you should use latest `@vue/cli-service ^5.0.8`):

    ```ts title="vue.config.mjs"
    import OriginalClassName from "@graphif/unplugin-original-class-name/webpack";

    export default {
      configureWebpack: {
        plugins: [
          OriginalClassName({
            /* options */
          }),
        ],
      },
    };
    ```

  </Tab>

  <Tab>
    **Vite:**
    ```ts title="vite.config.js"
    import OriginalClassName from "@graphif/unplugin-original-class-name/vite";
    import { defineConfig } from "vite";

    export default defineConfig({
      plugins: [
        OriginalClassName({
          /* options */
        }),
      ],
    });
    ```

    **Webpack:**
    ```ts title="quasar.conf.js"
    const OriginalClassNamePlugin = require("@graphif/unplugin-original-class-name/webpack").default;

    module.exports = {
      build: {
        chainWebpack(chain) {
          chain.plugin("@graphif/unplugin-original-class-name").use(
            OriginalClassNamePlugin({
              /* options */
            }),
          );
        },
      },
    };
    ```

  </Tab>

  <Tab>
    ```ts title="esbuild.config.js"
    import { build } from "esbuild";
    import OriginalClassName from "@graphif/unplugin-original-class-name/esbuild";

    build({
      /* ... */
      plugins: [
        OriginalClassName({
          /* options */
        }),
      ],
    });
    ```

  </Tab>

  <Tab>
    ```ts title="astro.config.mjs"
    import OriginalClassName from "@graphif/unplugin-original-class-name/astro";

    export default defineConfig({
      integrations: [
        OriginalClassName({
          /* options */
        }),
      ],
    });
    ```

  </Tab>
</Tabs>

## Configuration

The only config is `staticMethodName: string`

## TypeScript support

```json title="tsconfig.json"
{
  "compilerOptions": {
    // ...
    "types": ["@graphif/unplugin-original-class/client"]
  }
  // ...
}
```

Or use a declaration comment:

```ts title="vite-env.d.ts"
/// <reference types="@graphif/unplugin-original-class/client" />
```
